<template>
  <div class="tip">
        <mt-header fixed title="新闻资讯列表">
            <router-link to="/Home" slot="left">
                <mt-button icon="back">返回</mt-button>
            </router-link>
            <mt-button icon="more" slot="right"></mt-button>
        </mt-header>
      <!--详细列表信息-->
      <ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media" v-for="(x,index) in list":key="index">
					<router-link v-bind="{to:'/News/newsList/' + x.id}">
						<img class="mui-media-object mui-pull-left" v-bind:src="x.img_url">
						<div class="mui-media-body">
							<h4 v-html="x.title"></h4>
							<p class='mui-ellipsis' v-html="x.zhaiyao"></p>
              <span>{{x.add_time | datefmate('YYYY-MM-DD HH:mm:ss')}}</span><span>点击量：{{x.click}}</span>
						</div>
					</router-link>
				</li>
			</ul>
  </div>
</template>

<script>
//导入公共域名文件
import apiName from "../../kits/common.js";
export default {
  data(){
      return {
          list:[]
      }
  },
  created(){ //生命周期函数(自执行函数)
      this.getData();
  },
  methods:{
      getData(){
          const url = apiName.domainName + "/api/getnewslist";//确定url地址
          this.$http.get(url).then(function(response){ //进行数据请求
          const data = response.body;
          this.list = data.message;
          })
      }
  }
}
</script>

<style scoped>
    .mui-table-view {
        margin-top: -5px;/*设置与头部距离*/
    }
    /*设置列表项样式*/
    .mui-table-view .mui-media-object.mui-pull-left {
        margin-right: 20px;
    }
    .mui-table-view .mui-media-object {
        line-height: 80px;
        max-width: 80px;
        height: 80px;
    }
    .mui-media-body span:first-of-type {
        color: blue;
        float: left;
        margin-top: 1em;
    }
    .mui-media-body span:last-of-type {
        float: right;
        font-size: 14px;
        color: red;
        margin-top: 1em;
    }
    .mui-table-view-cell p {
      color: rgba(0,0,0,0.5);
    }
</style>

